<!--
 * @Author: lwy 1245883359@qq.com
 * @Date: 2025-02-20 20:50:09
 * @LastEditors: lwy 1245883359@qq.com
 * @LastEditTime: 2025-03-02 20:03:56
 * @FilePath: \wangyu-new-hetong\src\views\system\rzApply\surety-list.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
// 保证人列表
<template>
  <div class="app-page-box">
    <div class="app-page">
      <div class="query">
        <Back label="保证人信息列表" :cb="goBack" />
      </div>
      <a-button class="submit add" @click="onAdd">添加保证人</a-button>
      <div class="list">
        <Card
          class="card"
          v-for="item in list"
          :info="item.guarantorNatureVO || item.guarantorLegalVO"
          :key="item"
          @close="itemClose(item, index)"
          @view="onView(item.guarantorNatureVO, index)"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
  import { reactive, ref, onBeforeMount, onMounted } from 'vue';
  import Card from './components/card_surety.vue';
  import Back from '/@/components/go-back/index.vue';
  import { useRoute, useRouter } from 'vue-router';
  import { rzApplyApi } from '/@/api/system/rzApply';
  import { useRzApplyStore } from '/@/store/modules/system/rzApply';
    import { Modal } from 'ant-design-vue';
  import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
  import { createVNode } from 'vue';
  let rzApplyStore = useRzApplyStore();
  const route = useRoute();
  const router = useRouter();
  const list = ref([]);
  function goBack() {
    router.replace({
      path: '/rzApply/add',
      query: {
        bussNo: rzApplyStore.getBussNo,
      },
    });
  }
  const onView = (item) => {
    rzApplyStore.setRole('guarantor');
    rzApplyStore.setViewSetGuarantorInfo({ role: 1, ...item });
    router.push({
      path: '/rzApply/lessee-info',
      query: {
        bussNo: rzApplyStore.getBussNo,
        id: item.id,
      },
    });
  };
  function onAdd() {
    router.push({
      path: '/rzApply/person',
      query: {
        bussNo: rzApplyStore.getBussNo,
        mode: 'edit',
      },
    });
  }
  async function getData() {
    const res = await rzApplyApi.guarantorList({ bussNo: rzApplyStore.getBussNo });
    if (res.code == 0) {
      list.value = res.data;
    }
  }
  async function itemClose(item, index) {
    Modal.confirm({
      title: '提示',
      icon: createVNode(ExclamationCircleOutlined),
      content: '是否确认删除该数据？',
      onOk() {
        rzApplyApi.guarantorDelete({ id: item.id }).then((res) => {
          if (res.code == 0) {
            list.value.splice(index, 1);
          }
        });
      },
      onCancel() {
        console.log('Cancel');
      },
    });
  }
  onMounted(() => {
    getData();
  });
</script>
<style scoped lang="less">
  .app-page {
    display: flex;
    flex-direction: column;
    position: relative;
    .query {
      width: 100%;
      display: flex;
      margin: 24rem;
      box-sizing: border-box;

      .form {
        float: 1;
        display: flex;
      }
    }
    .list {
      flex: 1;
      padding: 1rem 0 0 24rem;
      overflow: auto;
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start;
      .card {
        margin: 0 30rem 30rem 0;
      }
    }
    .add {
      width: 126px;
      height: 42px;
      background: #fc5451 !important;
      border-radius: 5px;
      position: absolute;
      right: -32rem;
      top: 24rem;
    }
  }
</style>
